<template>
  <div class="province">
    <Table :columns="proColumns" :data="proData"></Table>
    <Modal v-model="delModal" @on-ok='del' title="删除河流">
      <p>确认删除</p>
    </Modal>
    <Modal v-model="addModal" @on-ok='add' title="添加河流">
      <Input v-model="proRiverCode" placeholder="请输入省编号"></Input>
    </Modal>
  </div>
</template>

<script>
import axios from 'axios'
import storage from 'good-storage'
export default {
  data () {
    return {
      proColumns: [{
        title: '河流名',
        key: 'river_name'
      }, {
        title: '市河长制编号',
        key: 'river_no'
      }, {
        title: '所对应的省河流',
        minWidth: 1000,
        render: (h, params) => {
          let html = []
          params.row.pro_river.map(item => {
            html.push(
              h('div', {
                style: {
                  display: 'inline-block'
                }
              }, [
                h('span', {
                  style: {
                    marginRight: '5px'
                  }
                }, item.province_rivername),
                h('span', {
                  style: {
                    marginRight: '5px'
                  }
                }, item.province_rivercode),
                h('Icon', {
                  props: {
                    type: 'ios-close'
                  },
                  on: {
                    click: () => {
                      this.saveCode = item._id
                      this.delModal = true
                    }
                  },
                  style: {
                    marginRight: '20px',
                    color: 'red',
                    cursor: 'pointer'
                  }
                })
              ])
            )
          })
          return h('div', html)
        }
      }, {
        title: '操作',
        render: (h, params) => {
          return h('Button', {
            props: {
              type: 'primary',
              size: 'small'
            },
            on: {
              click: () => {
                this.addModal = true
                this.proRiverCode = ''
                this.saveNo = params.row.river_no
              }
            }
          }, '添加')
        }
      }],
      proData: [],
      saveNo: '',
      delModal: false,
      addModal: false,
      proRiverCode: '',
      Page: {
        current: 1,
        pageSize: 13,
        total: 0,
        page: 1
      }
    }
  },
  methods: {
    getData () {
      let that = this
      axios({
        method: 'post',
        url: 'http://218.13.22.89/riverchief-province/rld/commom/prolist',
        data: {}
      }).then(
        function (res) {
          that.proData = res.data.result.result
        }
      )
    },
    del () {
      let that = this
      axios({
        method: 'post',
        url: 'http://218.13.22.89/riverchief-province/rld/commom/edit',
        data: {
          _id: that.saveCode,
          fs_riverno: '0000'
        }
      }).then(
        function (res) {
          if (res.data.code === '0000') {
            that.$Message.success({
              content: '删除成功'
            })
            that.getData()
          } else {
            that.$Message.warning({
              content: '操作失败' + res.data.message
            })
          }
        }
      )
    },
    add () {
      let that = this
      axios({
        method: 'post',
        url: 'http://218.13.22.89/riverchief-province/rld/commom/addpro',
        data: {
          province_rivercode: that.proRiverCode,
          fs_riverno: that.saveNo
        }
      }).then(
        function (res) {
          if (res.data.code === '0000') {
            that.$Message.success({
              content: '添加成功'
            })
            that.getData()
          } else {
            that.$Message.warning({
              content: '操作失败' + res.data.message
            })
          }
        }
      )
    },
    changePage (data) {
      this.Page.page = data
      this.getData()
    }
  },
  mounted () {
    this.getData()
  }
}
</script>


<style lang="scss" scoped>
.province{
  background: white;
  min-height: calc(100vh - 40px);
}
</style>
